<template>
  <el-menu  active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="/Home"
            text-color="#fff"
            :collapse="isCollapse"
            :style="menuIndex"
            show-timeout="0"
            hide-timeout="0"
            :collapse-transition="false"
            >
    <el-menu-item index="/Home">
      <el-icon><Cpu/></el-icon>
      <template #title> 首页</template>
    </el-menu-item>

    <el-menu-item index="/One">
      <el-icon><IceTea /></el-icon>
      <template #title> 导航一</template>
    </el-menu-item>

    <el-menu-item index="/Two">
      <el-icon><Cherry /></el-icon>
      <template #title> 导航二</template>
    </el-menu-item>

    <el-menu-item index="/Three">
      <el-icon><Umbrella /></el-icon>
      <template #title>导航三</template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>

</style>

<script>
import {Cherry, Cpu, IceTea, Message, Setting, Umbrella} from "@element-plus/icons-vue";

export default {
  components: {Umbrella, IceTea, Cherry, Cpu, Message, Setting},
  data(){
    return{
    }
  },
  methods:{
  },
  props:['isCollapse', 'menuIndex']
}
</script>